<template>
  <div id="index">
    <dyd-dialog width="400px" ref="dialog" :title="(updates?'修改':'新增')+'班级'">
      <dyd-form ref="dydForm" label-width="80px" :ruleForm="ruleForm" :rules="rules" @submit="submit">
        <el-form-item label="班级名称" prop="name">
          <el-input v-model="ruleForm.name"  placeholder="班级名称"></el-input>
        </el-form-item>
      </dyd-form>
      <div style="float: right;display: block" >
        <el-button plain type="info" plain @click="$refs.dydForm.resetForm();">清除</el-button>
        <el-button  type="primary" @click="$refs.dydForm.submitForm();">提交</el-button>
      </div>
      <div style="width: 100%;height: 40px"></div>
    </dyd-dialog>
    <div style="margin-bottom: 20px">
      <el-button   type="primary" round plain @click="updates=false;ruleForm=$JSP(form);$refs.dialog.openDia();">添加班级</el-button>
    </div>
    <dyd-table :data="tableData">
      <el-table-column type="expand" label="详情" width="50">
        <template slot-scope="scope" >
          <el-table v-if="scope.row.list" :data="scope.row.list">
            <el-table-column
              width="80"
              label="头像">
              <template slot-scope="scope">
                <user-image size="60px" :src="scope.row.userImg"></user-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="names"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="username"
              label="账号 ">
            </el-table-column>
            <el-table-column
              prop="password"
              label="密码 ">
            </el-table-column>
            <el-table-column
              prop="grade"
              label="权限 ">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="手机号 "
            >
            </el-table-column >
            <el-table-column
              prop="email"
              label="email ">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="ids"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="班级名称">
      </el-table-column>
      <el-table-column
        label="班级人数">
        <template slot-scope="scope">
          <span v-if="scope.row.list">
            {{scope.row.list.length}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        width="160"
        label="操作">
        <template slot-scope="scope">
          <dydLink  type="up" @click.native="updates=true;ruleForm=$JSP(scope.row);$refs.dialog.openDia();index=scope.$index">修改</dydLink>
          <dydLink  type="del"   @click.native="deleteAdmin(scope.row,scope.$index)">删除</dydLink>
        </template>
      </el-table-column>
    </dyd-table>
  </div>
</template>

<script>
  export default {
    name: "index",
    props: [''],
    data() {
      return {
        updates:false,
        form:{
          name:'',
        },
        ruleForm:{},
        rules:{
          name:[
            {  required: true, message: '请输入班级名称', trigger: 'blur'  },
          ]
        },
        tableData:[]
      }
    },
    methods: {
      success(path){
        this.ruleForm.img=path
      },
      submit(){
        let cnt=this.$JSP(this.ruleForm)
        if(!this.updates){
          cnt.ids=Date.now()
          this.$api.add('classes',cnt,res=>{
            this.tableData.splice(0,0,cnt)
            this.$refs.dialog.closeDia()
          })

        }else{
          this.$api.up('classes',cnt,res=>{
            this.tableData.splice(this.index,1,cnt)
            this.$refs.dialog.closeDia()
          })
        }
      },
      deleteAdmin(row,index){
        this.$api.del('classes',{ids:row.ids},res=>{
          this.tableData.splice(index,1)
        })
      },
      getClass(){
        this.$api.get('classes',{$orderBY: {col:'ids'}},res=>{
          res.map(item=>{
            this.$api.get('admin', {
              $orderBY: {col:'ids'},
              $where:{classId:item.ids}
            },r=>{
              this.$set(item,'list',r)
            })
          })
          this.tableData=res
        })
      }
    },
    mounted() {
      this.getClass()
    },
    created() {

    },
    components: {},
    watch: {},
  }
</script>

<style scoped lang='scss'>
  #index {

  }
</style>
